<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-input v-model="queryInfo.query" placeholder="请输入内容" clearable @clear="getArticleList">
            <el-button slot="append" icon="el-icon-search" @click="getArticleList" ></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addDialogVisible = true">添加文章</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="articleList"
        border
        style="width: 100%">
        <el-table-column prop="id" label="id" width="50"> </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="cate_name" label="分类"> </el-table-column>
        <el-table-column prop="keywork" label="关键字"> </el-table-column>
        <el-table-column label="状态">
          <!-- 指定插槽 scope代表这行数据 -->
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" @change="articleStatusChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"  @click="editEditDialog(scope.row.id)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeAdminById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        :hide-on-single-page="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!-- 添加文章 -->
      <el-dialog title="添加文章" :visible.sync="addDialogVisible" width="70%" @close="addDialogColse">
        <el-form ref="addFormRef" :model="addForm" label-width="80px">
          <el-form-item label="标题"  prop="title">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
          <el-form-item label="关键字" prop="keywork">
            <el-input v-model="addForm.keywork" ></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="cate_id">
            <template>
              <el-select v-model="addForm.cate_id" placeholder="请选择">
                <el-option v-for="item in articleCategoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <template>
              <!-- Two-way Data-Binding -->
              <quill-editor  v-model="addForm.content"/>
            </template>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="addForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="状态"  prop="status">
            <template>
              <el-radio label="0" v-model="addForm.status">禁用</el-radio>
              <el-radio label="1" v-model="addForm.status">启用</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addArticle">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 编辑文章 -->
      <el-dialog title="编辑文章" :visible.sync="editDialogVisible" width="70%" @close="editDialogColse">
        <el-form ref="editFormRef" :model="editForm" label-width="80px">
          <el-form-item label="标题"  prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="关键字" prop="keywork">
            <el-input v-model="editForm.keywork" ></el-input>
          </el-form-item>
          <el-form-item label="分类" prop="cate_id">
            <template>
              <el-select v-model="editForm.cate_id" placeholder="请选择">
                <el-option v-for="item in articleCategoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <template>
              <!-- Two-way Data-Binding -->
              <quill-editor  v-model="editForm.content"/>
            </template>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="editForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="状态"  prop="status">
            <template>
              <el-radio :label="0" v-model="editForm.status">禁用</el-radio>
              <el-radio :label="1" v-model="editForm.status">启用</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEditDialog">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        // 当前页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2
      },
      total: 0,
      // 显示添加文章dialog
      addDialogVisible: false,
      // 文章列表
      articleList: [],
      // 文章分类列表
      articleCategoryList: [],
      // 添加文章表单
      addForm: {
        title: '',
        cate_id: '',
        keywork: '',
        content: '',
        sort: '',
        status: '1'
      },
      // 显示编辑文章dialog
      editDialogVisible: false,
      // 编辑文章表单
      editForm: []
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      const { data: res } = await this.$http.get(this.GLOBAL.getArticleList, {
        params: this.queryInfo
      })
      if (res.status !== 200) return this.$message.error(res.info)
      this.articleList = res.data.articleList
      this.total = res.data.total
      this.articleCategoryList = res.data.articleCategoryList
    },
    handleSizeChange (pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getArticleList()
    },
    handleCurrentChange (pagenum) {
      this.queryInfo.pagenum = pagenum
      this.getArticleList()
    },
    async articleStatusChanged (row) {
      const { data: res } = await this.$http.post(this.GLOBAL.articleStatus, { id: row.id, status: row.status })
      if (res.status !== 200) return this.$message.error(res.info)
      this.$message.success(res.info)
    },
    addDialogColse () {
      // 清空表单
      this.$refs.addFormRef.resetFields()
      this.addDialogVisible = false
    },
    async addArticle () {
      console.log(this.addForm)
      const { data: res } = await this.$http.post(this.GLOBAL.addArticle, this.addForm)
      if (res.status !== 200) return this.$message.error(res.info)
      // 清空表单，并关闭
      this.addDialogColse()
      this.$message.success(res.info)
      this.getArticleList()
    },
    editDialogColse () {
      // 清空表单
      this.$refs.editFormRef.resetFields()
      this.editDialogVisible = false
    },
    async editEditDialog (id) {
      const { data: res } = await this.$http.get(this.GLOBAL.editArticle, {
        params: { id: id }
      })
      if (res.status !== 200) return this.$message.error(res.info)
      this.editForm = res.data.editForm
      this.editDialogVisible = true
    },
    async saveEditDialog () {
      const { data: res } = await this.$http.post(this.GLOBAL.saveArticle, this.editForm)
      if (res.status !== 200) return this.$message.error(res.info)
      this.$message.success(res.info)
      this.editDialogColse()
      this.getArticleList()
    },
    async removeAdminById (id) {
      const defaultConfirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch()
      if (defaultConfirm !== 'confirm') return this.$message.error('取消删除操作')
      const { data: res } = await this.$http.post(this.GLOBAL.delArticle, { id: id })
      if (res.status !== 200) return this.$message.error(res.info)
      this.getArticleList()
      this.$message.success(res.info)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
